<template>
  <div class="main">
    <div class="item">
      <van-field v-model="nickname" :clearable="true" placeholder="请输入昵称"/>
    </div>
    <div class="footer">
      <button type="button" class="foot-btn" @click="handleClick">确认修改</button>
    </div>
  </div>
</template>

<script>
import common from "../../api/common";
import api from "../../api";
export default {
  title: "修改昵称",
  bodyClass: "gray-bg",
  data() {
    return {
      uid: this.$store.state.uid,
      nickname: decodeURI(common.getParam("nickname"))
    };
  },
  methods: {
    handleClick() {
      if (this.nickname == "") {
        this.$toast.fail({
          message: "昵称不能为空",
          duration: 1000
        });
        return;
      }
      api.usercenter.edirNickname(this.uid, this.nickname, res => {
        this.$toast.success({
          message: `修改成功`,
          duration: 1000,
        })

        setTimeout(() => {
          this.$routerPush(this, `/pages/mine/Index`)
        }, 1 * 1000);
      });
    }
  }
};
</script>

<style lang="less" scoped>
.main {
  .footer {
    position: fixed;
    width: 100vw;
    bottom: 0;
  }
  .foot-btn {
    width: 100%;
    border: 0;
    outline: none;
    position: fixed;
    bottom: 0;
    background: #008fef;
    color: #fff;
    font-size: 4vw;
    padding: 3vw 0;
  }
}
</style>